import React from 'react';
import {Button, Checkbox, Dialog, Form, Loading, Table} from '@alifd/next';
import { logger } from 'ice';
import {addMapData} from "@/pages/Map/backend";
import styles from './index.module.scss'
export default function (props) {
  const {
    items,
    done,
  } = props;

  const renderArray = (v) => (v || []).join(';');
  const [loading,setLoading] = React.useState(false)
  const [tableSource, setTableSource] = React.useState(items);
  const doFilter = (params) => {
    const {
      noPhone,
      noWeb,
      noTag,
    } = params;
    let source = items;
    if (noPhone) {
      source = source.filter((x) => x.formatted_phone_number);
    }
    if (noWeb) {
      source = source.filter((x) => x.website);
    }
    if (noTag) {
      source = source.filter((x) => x.types);
    }
    setTableSource([...source]);
  };
  const onOk =async ()=>{
    if(tableSource.length ===0)return
    setLoading(true)
    await addMapData(tableSource).finally(()=>setLoading(false))
    done()
  }
  return (

    <Dialog
      title="结果"
      visible
      footer={false}
      style={{
        width: 'fit-content',
        minWidth: '40%',
        // maxWidth: '70%',
      }}
    >
      <Loading visible={loading}>
        <Form inline>
          <Form.Item label={'去除无电话的数据'}>
            <Checkbox name={'noPhone'} />
          </Form.Item>
          <Form.Item label={'去除无网址的数据'}>
            <Checkbox name={'noWeb'} />
          </Form.Item>
          <Form.Item label={'去除标签的数据'}>
            <Checkbox name={'noTag'} />
          </Form.Item>

          <Form.Item>
            <Form.Submit onClick={doFilter} type={'primary'}>过滤</Form.Submit>
          </Form.Item>
        </Form>
        <Table dataSource={tableSource} style={{height:'50vh',overflow:'auto'}} >
          <Table.Column title={'标题'} dataIndex={'name'} />
          <Table.Column title={'标签'} dataIndex={'types'} cell={renderArray} />
          <Table.Column title={'坐标'} dataIndex={'location'} cell={renderArray} />
          <Table.Column title={'电话'} dataIndex={'formatted_phone_number'} />
          <Table.Column title={'网址'} dataIndex={'website'} />
        </Table>
        <div className={styles.ops}>
          <Button className={styles.gap} onClick={() => done()}>取消</Button>
          <Button className={styles.gap} type={'primary'} onClick={onOk}>提交</Button>
        </div>
      </Loading>

    </Dialog>
  );
}
